<template>
    <view class="discount">
        <view class="header">
            <view class="header-left"><text>红包/抵用券</text></view>
            <view class="header-rigth">
                <text>全部查看</text>
                <text>(</text>
                <text class="as">新到1张</text>
                <text>)</text>
                <!-- <image src="" mode=""></image> -->
            </view>
        </view>
        <view class="msg">
            <view class="msg-left">
                <view class="msg-left-price">
                    <view>￥6</view>
                    <view>优惠券</view>
                </view>
            </view>
            <view class="msg-center">
                <view>外卖商家券:菜大全惊喜买菜券</view>
                <view>明日23:59到期</view>
                <view>使用规则</view>
            </view>
            <view class="msg-rigth"><button type="default">立即使用</button></view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {};
    },
    methods: {}
};
</script>

<style lang="scss" scoped>
.discount {
    padding: 30rpx;
    background-color: #f7f8fc;
    height: 100vh;
    .header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20rpx;
        .header-left {
            font-size: 36rpx;
            color: #4f515e;
            font-weight: 600;
        }
        .header-rigth {
            font-size: 32rpx;
            color: #5d5e62;
            .as {
                color: #ff700a;
            }
        }
    }
    .msg {
        background-color: white;
        // height: 245rpx;
        border-radius: 26rpx;
        display: flex;
        justify-content: space-between;
        padding: 20rpx;
        .msg-left {
            width: 20%;
            display: flex;
            align-items: center;
            justify-content: center;
            .msg-left-price {
                text-align: center;
                color: #f75c00;
                view:nth-child(1) {
                    font-size: 44rpx;
                    font-weight: 600;
                }
                view:nth-child(2) {
                    font-size: 28rpx;
                }
            }
        }
        .msg-center{
            width: 50%;
            view:nth-child(1){
                font-size: 28rpx;
                color: black;
            }
            view:nth-child(2){
                margin-top: 10rpx;
                margin-bottom: 10rpx;
                color: #e18f46;
                font-weight: 600;
            }
            view:nth-child(3){
                font-size: 24rpx;
                color: #9a9a9a;
            }
        }
        .msg-rigth{
            display: flex;
            align-items: center;
            justify-content: center;
            button{
                width: 160rpx;
                height: 70rpx;
                font-size: 26rpx;
                color: white;
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 0;
                border-radius: 32rpx;
                background-image: linear-gradient(to right, #ff8742 0%, #f66246 100%);
            }
        }
    }
}
</style>
